<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!doctype html>
<html lang="zxx">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Agricfarm an Agriculture Category Bootstrap Responsive Template | Home :: W3layouts</title>
  <!-- google fonts -->
  <link href="//fonts.googleapis.com/css2?family=Poppins:wght@300;600;700&display=swap" rel="stylesheet">
  <!-- google fonts -->
  <!-- Template CSS -->
  <link rel="stylesheet" href="assets/css/style-starter.css">
  <!-- Template CSS -->
</head>

<body>
  <!--header-->
  <header id="site-header" class="fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand-lg stroke">
        <h1><a class="navbar-brand mr-lg-5" href="index.html">
            Agric<span>farm</span>
          </a></h1>
        <!-- if logo is image enable this   
      <a class="navbar-brand" href="#index.html">
          <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
      </a> -->
        <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse"
          data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
          aria-label="Toggle navigation">
          <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
          <span class="navbar-toggler-icon fa icon-close fa-times"></span>
          </span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="services.html">Services</a>
            </li>
          
            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact</a>
            </li>

          </ul>
        </div>
        <div class="d-lg-block d-none">
          <a href="contact.html" class="btn btn-style btn-secondary ml-lg-3">Free Quote</a>
        </div>
        <!-- toggle switch for light and dark theme -->
        <div class="mobile-position">
          <nav class="navigation">
            <div class="theme-switch-wrapper">
              <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox">
                <div class="mode-container">
                  <i class="gg-sun"></i>
                  <i class="gg-moon"></i>
                </div>
              </label>
            </div>
          </nav>
        </div>
        <!-- //toggle switch for light and dark theme -->
      </nav>
    </div>
  </header>
  <!-- //header -->
  <!-- main-slider -->
  <section class="w3l-main-slider" id="home">
    <div class="companies20-content">
      <div class="owl-one owl-carousel owl-theme">
        <div class="item">
          <li>
            <div class="slider-info banner-view bg bg2">
              <div class="banner-info">
                <div class="container">
                  <div class="banner-info-bg text-left">
                    <p>Good Food</p>
                    <h5>Experience Them Real Agricultural</h5>
                    <a href="about.html" class="btn btn-white">Read More</a>
                  </div>
                </div>
              </div>
              <div class="banhny-w3grids">
                <div class="banhny-w3grids-1">
                  <img src="assets/images/banner1.jpg" class="img-curve img-fluid" alt="" />
                  <h4><a href="#" class="hnys-title">Organic Fertilizers</a></h4>
                </div>
                <div class="banhny-w3grids-1">
                  <img src="assets/images/banner2.jpg" class="img-curve img-fluid" alt="" />
                  <h4><a href="#" class="hnys-title">Expert & Professional Farm</a></h4>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="item">
          <li>
            <div class="slider-info  banner-view banner-top1 bg bg2">
              <div class="banner-info">
                <div class="container">
                  <div class="banner-info-bg text-left">
                    <p>Good Food</p>
                    <h5>Healthy Food for Good Health</h5>
                    <a href="about.html" class="btn btn-white">Read More</a>
                  </div>
                </div>
              </div>
              <div class="banhny-w3grids">
                <div class="banhny-w3grids-1">
                  <img src="assets/images/banner3.jpg" class="img-curve img-fluid" alt="" />
                  <h4><a href="#" class="hnys-title">Agricultural Products</a></h4>
                </div>
                <div class="banhny-w3grids-1">
                  <img src="assets/images/banner4.jpg" class="img-curve img-fluid" alt="" />
                  <h4><a href="#" class="hnys-title">Fresh Dairy Products</a></h4>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="item">
          <li>
            <div class="slider-info banner-view banner-top2 bg bg2">
              <div class="banner-info">
                <div class="container">
                  <div class="banner-info-bg text-left">
                    <p>Good Food</p>
                    <h5>Healthy Milk for Good Health</h5>
                    <a href="about.html" class="btn btn-white">Read More</a>
                  </div>
                </div>
              </div>
              <div class="banhny-w3grids">
                <div class="banhny-w3grids-1">
                  <img src="assets/images/banner1.jpg" class="img-curve img-fluid" alt="" />
                  <h4><a href="#" class="hnys-title">Organic Fertilizers</a></h4>
                </div>
                <div class="banhny-w3grids-1">
                  <img src="assets/images/banner2.jpg" class="img-curve img-fluid" alt="" />
                  <h4><a href="#" class="hnys-title">Expert & Professional Farm</a></h4>
                </div>
              </div>
            </div>
          </li>
        </div>
        <div class="item">
          <li>
            <div class="slider-info banner-view banner-top3 bg bg2">
              <div class="banner-info">
                <div class="container">
                  <div class="banner-info-bg text-left">
                    <p>Good Food</p>
                    <h5>Experience Them Real Agricultural</h5>
                    <a href="about.html" class="btn btn-white">Read More</a>
                  </div>
                </div>
              </div>
              <div class="banhny-w3grids">
                <div class="banhny-w3grids-1">
                  <img src="assets/images/banner3.jpg" class="img-curve img-fluid" alt="" />
                  <h4><a href="#" class="hnys-title">Organic Fertilizers</a></h4>
                </div>
                <div class="banhny-w3grids-1">
                  <img src="assets/images/banner4.jpg" class="img-curve img-fluid" alt="" />
                  <h4><a href="#" class="hnys-title">Expert & Professional Farm</a></h4>
                </div>
              </div>
            </div>
          </li>
        </div>
      </div>
    </div>
  </section>
  <!-- /main-slider -->
  <!--/grids-->
  <section class="w3l-grids-3 py-5" id="about">
    <div class="container py-md-5">
      <div class="row bottom-ab-grids align-items-center">
        <div class="col-lg-6 bottom-ab-left pr-lg-5">
          <h6 class="sub-title">About Us</h6>
          <h3 class="hny-title">
            A New Way To Invest In Agriculture</h3>
          <p class="my-3 pr-lg-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio
            voluptatem
            tenetur consequatur.Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae laudantium
            voluptate rem ullam dolore nisi voluptatibus esse quasi.Integer sit amet mattis quam.</p>
          <a href="about.html" class="btn btn-style btn-secondary mt-4">Read More</a>
        </div>
        <div class="col-lg-6 bottom-ab-right mt-lg-0 mt-5">
          <img src="assets/images/ab3.jpg" class="img-curve img-fluid" alt="" />
        </div>

      </div>
    </div>
  </section>
  <!--//grids-->
  <!--/services-->
  <section class="w3l-services1">
    <div id="content-with-photo4-block" class="py-5">
      <div class="container py-md-5">
        <div class="cwp4-two row">
          <div class="cwp4-image col-lg-6 pr-lg-5 mb-lg-0 mb-5">
            <img src="assets/images/ab4.jpg" class="img-fluid" alt="" />
          </div>
          <div class="cwp4-text col-lg-6">
            <h6 class="sub-title">what We Do</h6>
            <h3 class="hny-title">What We Offer for You</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicingelit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua.
            </p>

            <ul class="cont-4">
              <li><span class="fa fa-check"></span> Weed Control</li>
              <li><span class="fa fa-check"></span> Pest Control</li>
              <li><span class="fa fa-check"></span> Grass Seeding</li>
              <li><span class="fa fa-check"></span> Industry Oriented</li>
              <li><span class="fa fa-check"></span> Fresh Milk products</li>

            </ul>
          </div>

        </div>
      </div>
    </div>
  </section>
  <!--//services-->
  <!--/grids-->
  <section class="w3l-grids-3 py-5" id="flipbg">
    <div class="container py-md-5">
      <div class="w3flip-content">
        <div class="row">
          <div class="col-md-6 bg-left px-lg-0">
            <div class="bg-left-img position-relative">
              <img src="assets/images/ab1.jpg" class="img-fluid" alt="">
              <h4 class="tex1-p">Before</h4>
            </div>

          </div>
          <div class="col-md-6 mt-md-0 mt-4 bg-right px-lg-0">
            <div class="bg-right-img position-relative">
              <img src="assets/images/ab2.jpg" class="img-fluid" alt="">
              <h4 class="tex1-p">After</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--//grids-->
  <!--/grids2-->
  <section class="w3l-how-grids-3 py-5" id="how">
    <div class="container py-md-5">
      <div class="w3l-header mb-md-5 mb-4">
        <h6 class="sub-title">Healthy food</h6>
        <h3 class="hny-title">We Provide
          High-Quality <br> Organic Products</h3>
        <p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
      <div class="row bottom-ab-grids align-items-center">
        <div class="col-lg-4 bottom-ab-left">
          <div class="grdhny-info">
            <img src="assets/images/g1.jpg" class="img-curve img-fluid" alt="" />
            <h4><a href="#" class="hnys-title">Industry Oriented</a></h4>
            <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio voluptatem
              tenetur consequatur.</p>
          </div>
        </div>
        <div class="col-lg-4 bottom-ab-right my-lg-0 my-5">
          <div class="grdhny-info">
            <img src="assets/images/g2.jpg" class="img-curve img-fluid" alt="" />
            <h4><a href="#" class="hnys-title">Fresh Vegetables</a></h4>
            <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio voluptatem
              tenetur consequatur.</p>
          </div>
        </div>
        <div class="col-lg-4 bottom-ab-right">
          <div class="grdhny-info">
            <img src="assets/images/g3.jpg" class="img-curve img-fluid" alt="" />
            <h4><a href="#" class="hnys-title">Fresh Milk</a></h4>
            <p class="mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur hic odio voluptatem
              tenetur consequatur.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--//grids2-->
  <!-- stats -->
  <section class="w3l-stats py-5" id="stats">
    <div class="gallery-inner container py-lg-0 py-3">
      <div class="row stats-con pb-lg-3">
        <div class="col-lg-3 col-6 stats_info counter_grid">
          <p class="counter">730</p>
          <h4>Custom Products</h4>
        </div>
        <div class="col-lg-3 col-6 stats_info counter_grid1">
          <p class="counter">680</p>
          <h4>Our Farms</h4>
        </div>
        <div class="col-lg-3 col-6 stats_info counter_grid mt-lg-0 mt-5">
          <p class="counter">812</p>
          <h4>Happy Customers</h4>
        </div>
        <div class="col-lg-3 col-6 stats_info counter_grid2 mt-lg-0 mt-5">
          <p class="counter">990</p>
          <h4>Awards</h4>
        </div>
      </div>
    </div>
  </section>
  <!-- //stats -->
  <!--/w3l-bottom-->
  <section class="w3l-bottom py-5">
    <div class="container py-md-4 py-3 text-center">
      <div class="row my-lg-4 mt-4">
        <div class="col-lg-9 col-md-10 ml-auto">
          <div class="subscribe ml-auto">
            <div class="header-section text-left">
              <h3 class="hny-title two">Get Update From
                Anywhere</h3>
              <h4 class="my-2"> Don't Miss Out On The Good News!</h4>
            </div>
            <form action="#" method="post" class="subscribe-wthree pt-lg-3 mt-4">
              <div class="flex-wrap subscribe-wthree-field">
                <input class="form-control" type="email" placeholder="Enter your email..." name="email" required="">
                <button class="btn btn-style btn-primary" type="submit">Subscribe</button>
              </div>
              <p class="mt-3">By Subscribing this form, you agree to the <a href="#">privacy policy</a> and <a
                  href="#">terms of use</a></p>
            </form>

          </div>
        </div>
      </div>
    </div>
  </section>
  <!--//w3l-bottom-->
  <!-- testimonials -->
  <section class="w3l-clients" id="clients">
    <!-- /grids -->
    <div class="cusrtomer-layout py-5">
      <div class="container py-lg-4 py-md-3 pb-lg-0">
        <div class="heading text-center mx-auto">
          <h6 class="sub-title text-center">Here’s what they have to say</h6>
          <h3 class="hny-title mb-md-5 mb-4">our clients do the talking</h3>
        </div>
        <!-- /grids -->
        <div class="testimonial-width mt-5">
          <div id="owl-demo1" class="owl-two owl-carousel owl-theme">
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <blockquote>
                    <span class="fa fa-quote-left" aria-hidden="true"></span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae integer sit amet .
                  </blockquote>
                  <div class="testi-des">
                    <div class="test-img"><img src="assets/images/c1.jpg" class="img-fluid" alt="client-img">
                    </div>
                    <div class="peopl align-self">
                      <h3>Rohit Paul</h3>
                      <p class="indentity">Example City</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <blockquote>
                    <span class="fa fa-quote-left" aria-hidden="true"></span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae integer sit amet .
                  </blockquote>
                  <div class="testi-des">
                    <div class="test-img"><img src="assets/images/c2.jpg" class="img-fluid" alt="client-img">
                    </div>
                    <div class="peopl align-self">
                      <h3>Shveta</h3>
                      <p class="indentity">Example City</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <blockquote>
                    <span class="fa fa-quote-left" aria-hidden="true"></span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae integer sit amet .
                  </blockquote>
                  <div class="testi-des">
                    <div class="test-img"><img src="assets/images/c3.jpg" class="img-fluid" alt="client-img">
                    </div>
                    <div class="peopl align-self">
                      <h3>Roy Linderson</h3>
                      <p class="indentity">Example City</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <blockquote>
                    <span class="fa fa-quote-left" aria-hidden="true"></span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae integer sit amet .
                  </blockquote>
                  <div class="testi-des">
                    <div class="test-img"><img src="assets/images/c4.jpg" class="img-fluid" alt="client-img">
                    </div>
                    <div class="peopl align-self">
                      <h3>Mike Thyson</h3>
                      <p class="indentity">Example City</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <blockquote>
                    <span class="fa fa-quote-left" aria-hidden="true"></span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae integer sit amet .
                  </blockquote>
                  <div class="testi-des">
                    <div class="test-img"><img src="assets/images/c1.jpg" class="img-fluid" alt="client-img">
                    </div>
                    <div class="peopl align-self">
                      <h3>Rohit Paul</h3>
                      <p class="indentity">Example City</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="testimonial-content">
                <div class="testimonial">
                  <blockquote>
                    <span class="fa fa-quote-left" aria-hidden="true"></span>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae integer sit amet .
                  </blockquote>
                  <div class="testi-des">
                    <div class="test-img"><img src="assets/images/c2.jpg" class="img-fluid" alt="client-img">
                    </div>
                    <div class="peopl align-self">
                      <h3>Shveta</h3>
                      <p class="indentity">Example City</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <!-- /grids -->
    </div>
    <!-- //grids -->
  </section>
  <!-- //testimonials -->

  <!--/w3l-footer-29-main-->
  <section class="w3l-footer-29-main">
    <div class="footer-29 py-5">
      <div class="container py-lg-4">
        <div class="row footer-top-29">
          <div class="footer-list-29 col-lg-4">
            <h6 class="footer-title-29">About Us</h6>
            <p class="pr-lg-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae laudantium
              voluptate rem ullam dolore nisi voluptatibus esse quasi.Integer sit amet mattis quam.</p>
            <div class="main-social-footer-29 mt-4">
              <a href="#facebook" class="facebook"><span class="fa fa-facebook"></span></a>
              <a href="#twitter" class="twitter"><span class="fa fa-twitter"></span></a>
              <a href="#instagram" class="instagram"><span class="fa fa-instagram"></span></a>
              <a href="#linkedin" class="linkedin"><span class="fa fa-linkedin"></span></a>
            </div>
          </div>

          <div class="col-lg-2 col-md-6 col-sm-4 footer-list-29 footer-2 mt-lg-0 mt-5">

            <ul>
              <h6 class="footer-title-29">Useful Links</h6>
              <li><a href="index.html">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="services.html">Services</a></li>
              <li><a href="#"> Blog posts</a></li>
              <li><a href="contact.html">Contact us</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 footer-list-29 footer-3 mt-lg-0 mt-5">
            <ul>
              <h6 class="footer-title-29">Services</h6>
              <li>
                <a href="#url">
                  Healthy Milk
                </a>
              </li>
              <li>
                <a href="#url">
                  Organic Food
                </a>
              </li>
              <li>
                <a href="#url">
                  Fresh Fruits
                </a>
              </li>
              <li>
                <a href="#url">
                  Tree Planting
                </a>
              </li>
              <li>
                <a href="#url">
                  Gardening
                </a>
              </li>
            </ul>


          </div>
          <div class="col-lg-3 col-md-6 col-sm-8 footer-list-29 footer-1 mt-lg-0 mt-5">
            <h6 class="footer-title-29">Contact Us</h6>
            <ul>
              <li>
                <p><span class="fa fa-map-marker"></span> Agricfarm, #49436 block, #888 Honey rd
                  Newyork</p>
              </li>
              <li><a href="tel:+7-800-999-800"><span class="fa fa-phone"></span> +(21)-255-999-8888</a></li>
              <li><a href="mailto:Agricfarm@mail.com" class="mail"><span class="fa fa-envelope-open-o"></span>
                  Agricfarm@mail.com</a></li>
            </ul>
          </div>

        </div>
      </div>
    </div>
  </section>

  <section class="w3l-footer-29-main w3l-copyright">
    <div class="container">
      <div class="bottom-copies">
        <p class="copy-footer-29 text-center">© 2020 Agricfarm. All rights reserved. Design by <a
            href="https://w3layouts.com/" target="_blank">
            W3Layouts</a></p>
      </div>
    </div>

    <!-- move top -->
    <button onclick="topFunction()" id="movetop" title="Go to top">
      <span class="fa fa-angle-up"></span>
    </button>
    <script>
      // When the user scrolls down 20px from the top of the document, show the button
      window.onscroll = function () {
        scrollFunction()
      };

      function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("movetop").style.display = "block";
        } else {
          document.getElementById("movetop").style.display = "none";
        }
      }

      // When the user clicks on the button, scroll to the top of the document
      function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    </script>
    <!-- /move top -->
  </section>
  <!-- //footer-29 block -->
  <!-- disable body scroll which navbar is in active -->
  <script>
    $(function () {
      $('.navbar-toggler').click(function () {
        $('body').toggleClass('noscroll');
      })
    });
  </script>
  <!-- disable body scroll which navbar is in active -->

  <!-- Template JavaScript -->
  <script src="assets/js/jquery-3.3.1.min.js"></script>
  <script src="assets/js/theme-change.js"></script>
  <script src="assets/js/owl.carousel.js"></script>
  <!-- script for banner slider-->
  <script>
    $(document).ready(function () {
      $('.owl-one').owlCarousel({
        loop: true,
        margin: 0,
        nav: false,
        responsiveClass: true,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplaySpeed: 1000,
        autoplayHoverPause: false,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          480: {
            items: 1,
            nav: false
          },
          667: {
            items: 1,
            nav: true
          },
          1000: {
            items: 1,
            nav: true
          }
        }
      })
    })
  </script>
  <!-- //script -->
  <!-- script for tesimonials carousel slider -->
  <script>
    $(document).ready(function () {
      $("#owl-demo1").owlCarousel({
        loop: true,
        margin: 20,
        nav: false,
        responsiveClass: true,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          736: {
            items: 2,
            nav: false
          },
          1000: {
            items: 3,
            nav: false,
            loop: true
          }
        }
      })
    })
  </script>
  <!-- //script for tesimonials carousel slider -->
  <!-- stats number counter-->
  <script src="assets/js/jquery.waypoints.min.js"></script>
  <script src="assets/js/jquery.countup.js"></script>
  <script>
    $('.counter').countUp();
  </script>
  <!-- //stats number counter -->
  <!--/MENU-JS-->
  <script>
    $(window).on("scroll", function () {
      var scroll = $(window).scrollTop();

      if (scroll >= 80) {
        $("#site-header").addClass("nav-fixed");
      } else {
        $("#site-header").removeClass("nav-fixed");
      }
    });

    //Main navigation Active Class Add Remove
    $(".navbar-toggler").on("click", function () {
      $("header").toggleClass("active");
    });
    $(document).on("ready", function () {
      if ($(window).width() > 991) {
        $("header").removeClass("active");
      }
      $(window).on("resize", function () {
        if ($(window).width() > 991) {
          $("header").removeClass("active");
        }
      });
    });
  </script>
  <!--//MENU-JS-->

  <script src="assets/js/bootstrap.min.js"></script>

</body>

</html>